<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="description" content="助你务本去疾的营养微生态医学智能助手">
        <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
        <meta http-equiv="Access-Control-Allow-Origin" content="*">
        <link rel="stylesheet" href="/apps/css/weui.min-2.6.4.css">
        <title>益生智库对话服务C版</title>
        <style>
            body {
                background-image: url('https://totemlife.cn/apps/public/background-ededed.png');
                background-repeat: no-repeat;
                background-size: cover;
                padding-bottom: 100px;
                min-height: 100vh;
                display: flex;
                flex-direction: column;
                overflow-x: hidden;
            }
            .page {
                min-height: 100vh;
            }
            .weui-msg {
                min-height: 100vh;
                background-color: rgba(255, 255, 255, 0);
            }
            .chat-input-container {
                position: fixed;
                bottom: 0;
                width: 100%;
                padding: 10px;
                background: rgba(255, 255, 255, 0.8);
            }
            .chat-input {
                width: 80%;
                padding: 10px;
                border-radius: 4px;
                border: 1px solid #ccc;
            }
            .chat-submit {
                width: 15%;
                background-color: #1d8cf8;
                border: none;
                border-radius: 4px;
                color: white;
                padding: 10px;
                cursor: pointer;
            }
        </style>
        <script src="/apps/js/baidu-tongji-mtx.js"></script>
    </head>
    <body ontouchstart style="background-image: url('https://totemlife.cn/apps/default-image?code=chat-h5-bg');">

        <!-- 对话区域 -->
        <div id="chat-container" class="weui-msg">
            <!-- 聊天记录会动态生成 -->
        </div>

        <!-- 输入框 -->
        <div class="chat-input-container">
			<input type="text" id="user-message" class="chat-input" placeholder="请点击右下角按钮开始>>>">
            <button class="chat-submit" onclick="sendMessage()">发送</button>
        </div>

        <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
        <script src="/apps/js/wx-client-dom.js"></script>

        <script>
            const chatContainer = document.getElementById('chat-container');

            // 发送消息
            function sendMessage() {
                const userMessage = document.getElementById('user-message').value;
                if (!userMessage.trim()) return;

                // 添加用户消息到聊天记录
                appendMessage(userMessage, 'user');

                // 清空输入框
                document.getElementById('user-message').value = '';

                // 调用后端接口发送消息
                fetch('/apps/ai/cc-chat', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        message: userMessage,
                        sessionId: `session-for-tuid-{{uid}}` // 用实际的 uid 传递
                    })
                })
                .then(response => response.json())
                .then(data => {
                    // 添加机器人回复到聊天记录
                    if (data.reply) {
                        appendMessage(data.reply, 'bot');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    appendMessage("请求出错，请稍后再试。", 'bot');
                });
            }

            // 添加消息到聊天记录
            function appendMessage(message, sender) {
                const messageDiv = document.createElement('div');
                messageDiv.classList.add(sender);
                messageDiv.innerText = message;
                chatContainer.appendChild(messageDiv);
                chatContainer.scrollTop = chatContainer.scrollHeight; // 滚动到最新消息
            }
        </script>
    </body>
</html>
